<template>
  <div class="compute">
    <div>
      <h1>为我报价</h1>
      <span class="header-desc">获取透明装修花费</span>
    </div>
    <div>
      <h2>房屋信息</h2>
      <span>*新房=毛胚房，无需拆除费用</span>
      <van-radio-group v-model="radio" direction="horizontal">
        <van-radio name="1">老房</van-radio>
        <van-radio name="0">新房</van-radio>
      </van-radio-group>
      <div class="form">
        <div>
          <div>房屋建筑面积</div>
          <div>
            <input type="text" placeholder="请输入" v-model="area">
            <div>㎡</div>
          </div>
        </div>
        <div>
          <div>我家户型</div>
          <div>
            <van-field readonly
                       clickable
                       :value="value"
                       placeholder="选择"
                       @click="showPicker = true"
                       class="field"/>
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                  show-toolbar
                  :columns="columns"
                  @cancel="showPicker = false"
                  @confirm="onConfirm"
              />
            </van-popup>
          </div>
        </div>
      </div>
      <van-button type="info" size="large" @click="computePrice">计算报价</van-button>
    </div>
    <div></div>
  </div>
</template>

<script>
import {Toast} from "vant";


export default {
  name: "Compute",
  data() {
    return {
      id:this.$route.params.id,
      area:'',
      radio: '',
      value:'',
      price:{},
      showPicker: false,
      columns: [
        {
          values:['1室','2室','3室','4室','5室','6室','7室','8室','9室'],
          defaultIndex: 1,
        },
        {
          values:['0厅','1厅','2厅','3厅','4厅','5厅','6厅','7厅','8厅','9厅'],
          defaultIndex: 2,
        },
        {
          values:['0厨','1厨','2厨','3厨','4厨','5厨','6厨','7厨','8厨','9厨'],
          defaultIndex: 3,
        },
        {
          values:['0卫','1卫','2卫','3卫','4卫','5卫','6卫','7卫','8卫','9卫'],
          defaultIndex: 4,
        }
      ]
    }
  },
  mounted() {

  },
  methods: {
    onConfirm(value) {
      this.value = value.join('');
      this.showPicker = false;
      console.log(this.value);
    },
    computePrice(){
      let dataDecoration={};
      let dataFurniture={};
       if(this.area>0 && this.area<=500 && this.value!=="" && (this.radio==1 || this.radio==0)){
         if(this.area<=60 && this.area>0){
           if(this.radio==1){
             dataDecoration.dismantle=0.9;
             dataDecoration.water=0.9;
             dataDecoration.tax=0.3;
             dataDecoration.basis=7.2;
             dataDecoration.sum=9.3;
           }else {
             dataDecoration.basis=7.2;
             dataDecoration.tax=0.2;
             dataDecoration.sum=7.4;

           }
         }else {
           dataDecoration.basis=(1199*this.area/1000).toFixed(1);
           if(this.radio==1){
             dataDecoration.dismantle=(150*this.area/1000).toFixed(1);
             dataDecoration.water=(150*this.area/1000).toFixed(1);
             dataDecoration.tax=(1499*this.area*0.0314/1000).toFixed(1);
             dataDecoration.sum=dataDecoration.basis*1+dataDecoration.dismantle*1+dataDecoration.water*1+dataDecoration.tax*1
           }else {
             dataDecoration.tax=(1199*this.area*0.0314/1000).toFixed(1);
             dataDecoration.sum=dataDecoration.basis*1+dataDecoration.tax*1;

           }
           dataDecoration.sum=Math.round(dataDecoration.sum*10)/10;
         }
         let number=this.value.substr(0,1);
         dataFurniture.custom=1.5*number;
         dataFurniture.other=Math.round(13*number)/10;
         dataFurniture.device=1*number;
         dataFurniture.adornment=0.5*number;
         dataFurniture.sum=dataFurniture.custom+dataFurniture.other+dataFurniture.device+dataFurniture.adornment*1;
         this.price.sum=dataDecoration.sum+dataFurniture.sum;
         this.price.sum=Math.round(this.price.sum*10)/10;
         this.price.dataDecoration=dataDecoration;
         this.price.dataFurniture=dataFurniture;
         this.$router.push({name:'Chart',
           params:{
             area:this.area,
             style:this.radio,
             value:this.value
           }
           });
         sessionStorage.setItem("price",JSON.stringify(this.price))
       }else {
         if(this.area>500){
           Toast('房屋最大面积不得超过500平方米');
         }else {
           Toast('请完善信息');
         }

       }

    }
  },

}
</script>

<style lang="scss">
@import "../../public/sass/compute";
</style>
